<template>
    <div class="role-wrapper">
        <el-dialog title="积分充值介绍" :visible.sync="dialogVisible" :close-on-click-modal="false" width="500px" center @close="cancelClick">
            <div class="detail-page">
                <!-- <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="money" label="充值金额" :align="center">
                    </el-table-column>
                    <el-table-column prop="point" label="送积分" :align="center">
                    </el-table-column>
                    <el-table-column prop="getPoint" label="到账积分" :align="center">
                    </el-table-column>
                    <el-table-column prop="discount" label="相当于折扣" :align="center">
                    </el-table-column>
                </el-table>
                <p class="marg-T1" style="color:#FF5733;">*充值积分的比例为1:1，1元钱1个积分，每次充值有效期为1年，时间到期清零。</p>
                <p class="t-cen fs-18 marg-B1 marg-T1" style="font-weight:600;color:#000;">联系客户充值</p> -->
                <!-- <div class="wx-code">
                    <img :src="qrcodeData.photo" alt="">
                </div> -->
                <img style="width: 100%;" :src="qrcodeData.photo" alt="">
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { init } from "echarts/lib/echarts";
import {request} from "../assets/js/utils/request";
export default {
    props: ['isDialog','dataType','dataInfo'],
    data() {
        return {
            loading: false,
            dialogVisible: false,
            detail: {},
            tableData: [{
                money: '1000元',
                point: 0,
                getPoint: '1000分',
                discount: '0折'
            },{
                money: '3000元',
                point: 300,
                getPoint: '1300分',
                discount: '9折'
            },{
                money: '5000元',
                point: 1000,
                getPoint: '1000分',
                discount: '8折'
            }],
            center: 'center',
            qrcodeData: {}
        }
    },
    created() {
        this.initData()
    },
    methods: {
        cancelClick() {
            this.dialogVisible = false
            this.$emit('closeClick')
        },
        handleCheckedSure() {
            request({
                url: '/user/clue/buy',
                method: 'POST',
                data: {
                    clue_id: this.dataInfo.clue_id,
                    type: this.dataType === 'grab' ? 1 : 2
                }
            }).then(res => {
                if(res.code == 200) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                    this.dialogVisible = false
                    this.$emit('dialogSave')
                } else{
					this.$message({
					    message: res.message,
					    type: 'error'
					});
				}
            }).catch((error) => {
                console.log(error,'dddddddd')
                // this.$message({
                //     message: '保存成功',
                //     type: 'success'
                // });
            })
        },
        initData() {
            request({
                url: '/user/money/qrcode',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.qrcodeData = res.data.qrcode[0]
                }
            }).catch((error) => {
                
            })
        }
    },
    watch: {
        isDialog(newVal, oldVal) {
            this.dialogVisible = newVal
            // this.detail = this.dataInfo
        }
    }
}
</script>
<style lang="less" scoped>
    /deep/.el-dialog{
        border-radius: 15px;
    }
    .detail-page{
		.detail-wrap{
			padding: 30rpx;
			border-radius: 8px;
			background: rgba(255, 255, 255, 1);
			.top{
                padding-bottom: 20px;
				border-bottom: 1px solid #E5E5E5;
			}
			.case-list{
				.bot-t{
                    padding-top: 20rpx;
                    border-top: 2rpx solid #E5E5E5;
                    .right{
                        display: flex;
                    }
                }
                .phone-icon{
                    width: 26rpx;
                }
			}
		}
		.btn-box{
            text-align: center;
			// width: 100%;
			// height: 160rpx;
			// background: rgba(255, 255, 255, 1);
			// box-shadow: 0px -1px 4px  rgba(0, 0, 0, 0.2);
			// display: flex;
			// align-items: center;
			.btn{
				font-size: 14px;
                padding: 0;
				color: #fff;
				width: 96px;
                height: 28px;
				text-align: center;
				line-height: 28px;
				border-radius: 25px;
			}
			.b-bg{
				background: #2967E3;
			}
			.l-bg{
				background: #00BAAD;
			}
            .gray{
                background: #A6A6A6;
            }
		}
        .wx-code{
            margin: 0 auto;
            text-align: center;
            width: 150px;
            height: 150px;
            line-height: 150px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(229, 229, 229, 1);
            img{
                width: 140px;
            }
        }
	}
</style>